// 获取li标签
var li = document.querySelectorAll(".wwh-finance-main05 ul li")
// 获取盒子
var boxIHP = document.querySelector(".wwh-main05-con")
// 点击
for (var i = 0; i < li.length; i++) {
  li[i].index = i
  li[i].onclick = function () {
    // 清空类名
    for (var j = 0; j < li.length; j++) {
      li[j].className = ''
    }
    this.className = 'active'
    this.style.width = "30px"
    boxIHP.innerHTML = ''
    id(this.index)
    fn(this.index)
  }
}
// 默认第一个
li[0].onclick()

function fn(a) {
  if (a == 0) {
    li[2].style.width = "10px"
  }
  if (a == 2) {
    li[0].style.width = "10px"
  }
}
function id(id) {
  ajax({
    // 请求方式
    method: "get",
    // 请求地址
    url: `https://www.jsteels.com:9088/jz/portal/service/list/${id + 1}/3`,
    // 异步同步
    async: true,
    // 转嘀的参数
    data: {},
    // 请求头
    contentType: "",
    // 成功的回调函数
    success: function (res) {
      var obj = JSON.parse(res)
      // 遍历
      for (var i = 0; i < obj.list.length; i++) {
        console.log(i);
        // 正则表达式
        var str = obj.list[i].imgPath
        var reg = /^http/g
        // 判断链接是否有前缀
        if (reg.test(str)) {
          boxIHP.innerHTML += `
        <div class="wwh-main05-box ">
          <img src="${obj.list[i].imgPath}" alt="">
          <div class="wwh-main05-box-content">
            <h3>${obj.list[i].title}</h3>
            <p>${obj.list[i].content}</p>
            <h3>${obj.list[i].titlee}</h3>
            <p>${obj.list[i].contentt}</p>
          </div>
        </div>
      `
        } else {
          boxIHP.innerHTML += `
        <div class="wwh-main05-box ">
          <img src="https://www.jsteels.com/prod-api${obj.list[i].imgPath}" alt="">
          <div class="wwh-main05-box-content">
            <h3>${obj.list[i].title}</h3>
            <p>${obj.list[i].content}</p>
            <h3>${obj.list[i].titlee}</h3>
            <p>${obj.list[i].contentt}</p>
          </div>
        </div>
      `
        }

      }
      console.log(obj.list);

    },
    // 失败的回调函数
    error: function (err) {
      console.log(err);
    }
  })
}


// 表单
// 获取点击标签
var button = document.querySelector(".wwh-form")
// 获取隐藏标签
var div = document.querySelector(".wwh-from-more")
// 获取箭头标签
var list = document.querySelector(".wwh-form span:nth-of-type(2)")
// 获取p标签
var ps=document.querySelectorAll(".wwh-from-more p")
button.onclick = function () {
  div.style.height = "90px"
  list.style.transform = "rotate(-270deg)"
  fn1()
}
function fn1() {
  button.onclick = function () {
    div.style.height = "0"
    list.style.transform = "rotate(-90deg)"
    fn2()
  }
}
function fn2() {
  button.onclick = function () {
    div.style.height = "90px"
    list.style.transform = "rotate(-270deg)"
    fn1()
  }
}

// 点击p
for(var i=0;i<ps.length;i++){
  ps.index=i
  ps[i].onclick=function(){
    for(j=0;j<ps.length;j++){
      ps[j].className=''
    }
    this.className='wwh-main06-show'
  }
}
ps[0].onclick()

  // 获取input
  var ipt=document.querySelectorAll(".wwh-main06-main input")
  // 点击input,，遍历
  for(var i=0;i<ipt.length;i++){
    ipt[i].onfocus=function(){
      this.style.border="1px solid blue"
    }
    ipt[i].onblur=function(){
      this.style.border="1px solid #ccc"
    }
  }

    // 获取提交按钮
    var btn=document.querySelector(".wwh-main06-right")
    btn.onclick=function(){
      if(ipt[0].value==""){
        alert("请输入手机号")
      }else if(ipt[1].value==""){
        alert("请输入昵称")
      }else{
        ipt[0].value=''
        ipt[1].value=''
        alert("提交成功")
      }
    }
